<template>
  <div class="add_con_form tl" v-loading="loading">
    <el-dialog :title="mytitle" :close-on-click-modal="false" :modal-append-to-body="false" :visible.sync="visible" :show="show"
        :before-close="closeDialog" @close="$emit('update:show', false)" class="tl size_13" width="800px">
      <el-form :model="data" :rules="dataYZ" ref="data" label-width="120px">
        <el-form-item label="插件标题" prop="title">
          <el-col :span="12">
            <el-input placeholder v-model="data.title" clearable></el-input>
          </el-col>
        </el-form-item>

        <el-form-item label="插件类别" prop="cate">
          <el-col :span="12">
            <el-select v-model="data.cate" placeholder="请选择" @change="handChange">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-col>
        </el-form-item>

        <el-form-item label="链接地址" prop>
          <el-col :span="12">
            <el-input placeholder="链接地址与栏目地址一致" v-model="data.url" clearable></el-input>
          </el-col>
        </el-form-item>

        <el-form-item label="前台链接" prop>
          <el-col :span="12">
            <el-input placeholder="前台链接地址" v-model="data.links" clearable></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="价格" prop="price">
          <el-col :span="12">
            <el-input placeholder v-model="data.price" clearable></el-input>
          </el-col>
        </el-form-item>

        <el-form-item label="插件封面" prop="pic">
          <el-col :span="12">
            <el-input v-model="data.pic" autocomplete="off" disabled class="mar_bottom_5"></el-input>
            <el-upload action="/api/common/upload/index/" :on-success="uploadSuccess" list-type="picture-card" :on-error="uploadError"
                :file-list="fileList2" :show-file-list="false">
              <img v-if="data.pic" :src="$fnc.getImgUrl(data.pic)" class="avatar" />
              <i v-else class="el-icon-plus"></i>
            </el-upload>
          </el-col>
        </el-form-item>
        <el-form-item label="上传视频" prop="video">
          <el-col :span="12">
            <el-button type="success" :loading="$store.state.isLoading" @click="uploadVideo(data.video)" size="small">点击上传</el-button>
          </el-col>
        </el-form-item>
        <el-form-item label="视频链接" prop="video">
          <el-col :span="12">
            <el-input placeholder v-model="data.video" clearable></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="简介" prop="desc">
          <el-col :span="12">
            <el-input placeholder type="textarea" rows="5" v-model="data.desc" clearable></el-input>
          </el-col>
        </el-form-item>

        <el-form-item>
          <el-button :loading="$store.state.isLoading" size="medium" type="primary" @click.prevent="subForm('data')">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog :close-on-click-modal="false" @close="close_video" title="上传视频" :append-to-body="true" :visible.sync="dialogFormVisible">
      <uploadvideo @send_url="rev_send_url" :pro_src="data.video" ref="video_plugin"></uploadvideo>
    </el-dialog>
  </div>
</template>

<style lang="less" scoped></style>

<script>
import uploadvideo from "@/components/currency/uploadvideo";
export default {
  data () {
    return {
      dialogFormVisible: false,
      options: [
        {
          value: "",
          label: ""
        }
      ],
      mytitle: "",
      fileList2: [],
      updateUrl: "",
      showImg: true,
      value: "",
      data: {
        title: "",
        pic: "",
        cate: "",
        price: "",
        desc: "",
        url: "",
        video: ""
      },
      loading: false,
      dataYZ: {
        title: [{ required: true, message: "请输入标题", trigger: "blur" }]
      },
      visible: this.show
    };
  },
  components: {
    uploadvideo
  },
  props: {
    show: Boolean,
    editId: String,
    clickNum: Number
  },
  methods: {
    close_video () {
      this.visible = true;
      this.dialogFormVisible = false;
      this.$refs.video_plugin.close_video();
    },
    rev_send_url (obj) {
      var params = {};
      this.visible = true;
      this.dialogFormVisible = false;
      this.data.video = obj.video_url;
      this.data.vid = obj.video_id;
      params = this.data;
      this.$api.getAdminuser.pluginSaveEdit(params).then(res => {
        if (res.data.code == 200 && res.data.result != null) {
          this.$fnc.alertSuccess({ text: "编辑成功" }); //成功弹出框
          // this.visible = false;
          this.dialogFormVisible = false;
        } else {
          this.$fnc.alertError(res.data.result); //失败弹出框
        }
      });
    },
    uploadVideo () {
      this.visible = false;
      this.dialogFormVisible = true;
    },
    uploadSuccess (response) {
      if (response.code == 200 && response.code_desc == "请求成功") {
        this.$message.success("上传成功！");
        if (response.result.indexOf("http") <= 0) {
          this.showImg = true;
          this.data.pic = response.result;
          this.updateUrl = "/api/" + response.result;
        }
      } else if (response.code == 400) {
        this.$message.error("上传失败！不支持的类型");
      }
    },
    uploadError (response) {
      if (response.code == 400) {
        this.$message.error("无效请求");
      }
    },
    getOption () {
      var data = {};
      this.$api.getAdminuser.getPluginCateOption(data).then(res => {
        this.options = res.data.result;
        console.log(this.options);
      });
    },
    handChange (val) {
      console.log(val);
      this.data.cate = val;
    },

    closeDialog () {
      this.visible = false;
    },
    getDetails (id) {
      var data = {};
      data["id"] = id;
      this.$api.getAdminuser.PluginDetail(data).then(res => {
        this.data = res.data.result;
        console.log(this.data);
      });
    },
    subForm (formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.editId == undefined) {
            this.AddNews(formName);
          } else {
            this.UpdateNews(formName);
          }
        }
      });
    },
    AddNews () {
      this.$api.getAdminuser.pluginSaveAdd(this.data).then(res => {
        if (res.data.status == 1 && res.data.code == 200) {
          this.$fnc.alertSuccess({ text: "添加成功" });
          this.$emit("parent", "这里刷新父页面");
          this.visible = false;
        } else {
          this.$fnc.alertError(res.data.code_desc, res.data.result);
        }
      });
    },
    UpdateNews (formName) {
      console.log("更新中。。");
      this.$refs[formName].validate(valid => {
        if (valid) {
          var params = {};
          params["id"] = this.editId;
          params["title"] = this.data.title;
          params["cate"] = this.data.cate;
          params["price"] = this.data.price;
          params["pic"] = this.data.pic;
          params["desc"] = this.data.desc;
          params["url"] = this.data.url;
          params["links"] = this.data.links;
          params["video"] = this.data.video;
          console.log(params);
          this.$api.getAdminuser.pluginSaveEdit(params).then(res => {
            if (res.data.code == 200 && res.data.result != null) {
              this.$emit("parent", "这里刷新父页面");
              this.$fnc.alertSuccess({ text: "编辑成功" }); //成功弹出框
              this.visible = false;
            } else {
              this.$fnc.alertError(res.data.result); //失败弹出框
            }
          });
        }
      });
    }
  },
  watch: {
    show () {
      this.visible = this.show;
    },
    clickNum (id) {
      console.log("点击button次数", id);
      console.log("编辑ID=" + this.editId);
      this.getOption();
      if (this.editId !== undefined) {
        this.mytitle = "插件编辑";
        this.getDetails(this.editId);
      } else {
        this.mytitle = "添加插件";
        if (this.$refs["data"] !== undefined) {
          this.$refs["data"].resetFields();
        }
        this.selectedOptions = [];
        this.updateUrl = "";
        this.showImg = false;
      }
    }
  },
  mounted () { },
  created () { },
  updated () { }
};
</script>
